<template>
	<div class="login-register">
		<div class="contain">
			<img src="../../../res/images/logo.png" />
			<!-- 主功能页面 -->
			<div class="big-box" :class="{ active: isLogin }">
				<!-- 登录页面 -->
				<div class="big-contain" key="bigContainLogin" v-if="isLogin">
					<div class="btitle">
						系统登录
					</div>
					<div class="bform">
						<input type="text" placeholder="请输入账号" autocomplete="off" v-model="form.userName">
						<span class="errTips" v-if="userNameError">* 账号填写错误 *</span>
						<input type="password" placeholder="请输入密码" autocomplete="off" v-model="form.password">
						<span class="errTips" v-if="passwordError">* 密码填写错误 *</span>
					</div>
					<button class="bbutton" @click="login()">登 录</button>
				</div>
				<!-- 注册页面（仅展示） -->
				<div class="big-contain" key="bigContainRegister" v-else>
					<div class="btitle">创建账户</div>
					<div class="bform">
						<input type="text" placeholder="用户名" v-model="form.userName">
						<span class="errTips" v-if="existed">* 用户名已经存在！ *</span>
						<input type="email" placeholder="邮箱" v-model="form.userEmail">
						<input type="password" placeholder="密码" v-model="form.password">
					</div>
					<button class="bbutton" @click="register">注 册</button>
				</div>
			</div>
			<!-- 辅显示页面 -->
			<div class="small-box" :class="{ active: isLogin }">
				<!-- 注册提示页 -->
				<div class="small-contain" key="smallContainRegister" v-if="isLogin">
					<div class="stitle">你好，国创 !</div>
					<!-- <p class="scontent">开始注册，和我们一起旅行~</p> -->

					<p class="scontent">百尺竿头再进一步<br />百亿国创共赴征途</p>
					<button class="sbutton" @click="changeType">注册</button>
				</div>
				<!-- 登录提示页 -->
				<div class="small-contain" key="smallContainLogin" v-else>
					<div class="stitle">欢迎回来 !</div>
					<p class="scontent">请登录您的账户~<br /><br />贯彻双智新战略<br />擎画科创新蓝图</p>
					<button class="sbutton" @click="changeType">登录</button>
				</div>
			</div>
      <img src="../../../res/images/logo.png" style="float:right;margin-right: 16px"/>
		</div>
		<div class="footer">
      <p class="p" style="margin-top:4px;">技术支持: @你说的全队</p>
      <p class="p" style="margin-top:0px;">版权支持: @科大国创云网科技有限公司</p>
		</div>
	</div>
</template>

<script>

export default {
	name: 'loginRegister',
	data() {
		return {
			isLogin: false,
			userNameError: false,
			passwordError: false,
			existed: false,
			form: {
				userName: '',
				userEmail: '',
				password: ''
			}
		}
	},
	methods: {
		changeType() {
			this.isLogin = !this.isLogin
			this.form.userName = ''
			this.form.userEmail = ''
			this.form.password = ''
		},
		// 登录
		login() {
     /* sessionStorage.setItem('isLogin',1);*/
			const self = this;
			if (self.form.userName != "" && self.form.password != "") {
				self.$axios({
					method: 'post',
					url: 'http://116.62.162.194:8089/userinfo/login',
					data: {
						userName: self.form.userName,
						password: self.form.password
					},

				}).then(res => {

					let data = res.data;

					// 登录成功
         this.$store.commit('handleUserName',self.form.userName)
          this.$store.commit('handlePassword',self.form.password)
          this.$store.commit('setToken',data.data.token)

					if (data.code == 20000) {
						// 管理员权限
						if (data.authentication === "管理员") {
							self.$router.replace({ path: "/home" });
						} else {
							// 普通用户权限
							self.$router.replace({ path: "/home" });
						}

						self.form = {};
						this.$message({
							message: 登录成功,
							type: "success",
						});

					} else {
						// 登录失败
						self.$message.error(res.data.message);
					}
					// switch (res.data) {
					// 	case 0:
					// 		// alert("登陆成功！");
					// 		self.$message({
					// 			showClose: true,
					// 			message: '登录成功！',
					// 			type: 'success'
					// 		});
					// 		break;
					// 	case -1:
					// 		this.userNameError = true;
					// 		break;
					// 	case 1:
					// 		this.passwordError = true;
					// 		break;
					// }
				})
					.catch(err => {
						console.log(err);
					})
			} else {
				// alert("填写不能为空！");
				self.$message({
					showClose: true,
					message: '账号和密码不能为空！',
					type: 'error'
				});
			}
		},
    //登陆展示
 /*   login(){
      this.$router.push('/home')
    },*/
		// 注册（仅展示）
		register() {
			const self = this;
			if (self.form.userName != "" && self.form.userEmail != "" && self.form.password != "") {
				self.$axios({
					method: 'post',
					url: 'http://127.0.0.1:10520/api/user/add',
					data: {
						userName: self.form.userName,
						userEmail: self.form.userEmail,
						password: self.form.password
					}
				})
					.then(res => {
						switch (res.data) {
							case 0:
								alert("注册成功！");
								this.login();
								break;
							case -1:
								this.existed = true;
								break;
						}
					})
					.catch(err => {
						console.log(err);
					})
			} else {
				// alert("填写不能为空！");
				self.$message({
					showClose: true,
					message: '信息填写不能为空！',
					type: 'error'
				});
			}
		}
	}
}
</script>

<style scoped="scoped">
.login-register {
	width: 100vw;
	height: 100vh;
	box-sizing: border-box;
	background-color: #ecf0f3;
	color: #a0a5a8;
	font-family: "Montserrat", sans-serif;
	background-image: url(../../../res/images/GIF.gif);

}

.contain {
	width: 60%;
	height: 60%;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #ecf0f3;
	border-radius: 20px;
	box-shadow: 0 0 3px #f0f0f0,
		0 0 6px #f0f0f0;
	box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
	border-radius: 12px;
	overflow: hidden;
}

.big-box {
	width: 70%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 30%;
	transform: translateX(0%);
	transition: all 1s;
}

.big-contain {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.btitle {
	font-size: 1.8em;
	font-weight: bold;
	color: rgb(59, 57, 57);
}

.bform {
	width: 100%;
	height: 40%;
	padding: 2em 0;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.bform .errTips {
	display: block;
	width: 50%;
	text-align: left;
	color: red;
	font-size: 0.7em;
	margin-left: 1em;
}

.bform input {
	width: 50%;
	height: 50px;
	border: none;
	outline: none;
	border-radius: 20px;
	padding-left: 2em;
	/* background-color: #f0f0f0; */
	border: none;
	outline: none;
	font-family: "Montserrat", sans-serif;
	background-color: #ecf0f3;
	transition: 0.25s ease;
	border-radius: 10px;
	box-shadow: inset 2px 2px 4px #818fa2, inset -2px -2px 4px #f9f9f9;
}

.bbutton {
	width: 20%;
	height: 50px;
	border-radius: 24px;
	border: none;
	outline: none;
	background-color: #649eca;
	color: #fff;
	font-size: 1.1em;
	cursor: pointer;
}

.small-box {
	width: 30%;
	height: 100%;
	/* background: linear-gradient(135deg, #8cf, #0c64a7); */
	background: linear-gradient(135deg, rgb(5, 77, 132), #6ea3cc);
	/* background: linear-gradient(135deg, rgb(57, 167, 176), rgb(56, 183, 145)); */
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(0%);
	transition: all 1s;
	border-top-left-radius: inherit;
	border-bottom-left-radius: inherit;
}

.small-contain {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.stitle {
	font-size: 1.8em;
	font-weight: bold;
	color: #fff;
}

.scontent {
	font-size: 1.0em;
	color: #fff;
	text-align: center;
	padding: 2em 4em;
	line-height: 1.7em;
}

.sbutton {
	width: 60%;
	height: 40px;
	border-radius: 24px;
	border: 1px solid #fff;
	outline: none;
	background-color: transparent;
	color: #fff;
	font-size: 1.0em;
	cursor: pointer;
}

.big-box.active {
	left: 0;
	transition: all 0.5s;
}

.small-box.active {
	left: 100%;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: inherit;
	border-bottom-right-radius: inherit;
	transform: translateX(-100%);
	transition: all 1s;
}

.footer {
/*	padding-left: 600px;
	padding-top: 18%;
	color: black;*/
  text-align:center;
  color:#ffffff;
  background-color: rgba(0,0,0,0.3);
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:50px;
  font-size: 12px;
}
.p{font-family:"Times New Roman", Times, serif;}

.contain img {
	padding-top: 20px;
	padding-left: 20px;
}
</style>
